<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <title>Carousel Widget: Dynamic Loading Example</title>
        <!-- Some basic styles for all examples -->
        <link type="text/css" rel="stylesheet" href="css/common.css">
        <!-- Style the container, and set dimensions for the list items -->
        <link type="text/css" rel="stylesheet" href="css/carousel.css">
        <!-- Dependencies -->
        <link type="text/css" rel="stylesheet"
              href="../../../build/logger/assets/skins/sam/logger.css">
        <link type="text/css" rel="stylesheet"
              href="../../../build/carousel/assets/skins/sam/carousel.css">
        <script src="../../../build/yahoo/yahoo-debug.js"></script>
        <script src="../../../build/dom/dom-debug.js"></script>
        <script src="../../../build/event/event-debug.js"></script>
        <script src="../../../build/logger/logger-debug.js"></script>
        <script src="../../../build/connection/connection-debug.js"></script>
        <script src="../../../build/element/element-debug.js"></script>
        <script src="../../../build/carousel/carousel-beta-debug.js"></script>
        <!-- Styles specific for this example only. -->
        <style type="text/css">
            /* Style the spotlight container */
            #spotlight {
                border: 1px solid #ccc;
                height: 180px;
                margin: 10px auto;
                padding: 1px;
                width: 240px;
            }

            #container {
                margin: 0 auto;
            }

            .yui-skin-sam .yui-carousel-nav ul,
            .yui-skin-sam .yui-carousel-nav select {
                display: none;
            }
            
            .yui-carousel-element li {
                width: 75px;
            }
        </style>
        <script>
            var carousel, curpos, items = [], myLogReader;

            function getImageTag(img) {
                return "<img src=\"" + img + "\" height=\"75\" width=\"75\">";
            }

            function getImages() {
                var carousel = this;
                
                YAHOO.util.Connect.asyncRequest("GET",
                    "php/getimages.php?pos=" + curpos,
                    {
                        success: function (o) {
                            var i = curpos,
                                j = 0,
                                r = eval('(' + o.responseText + ')');
                            
                            curpos += r.length;

                            while (i < curpos) {
                                if (r[j]) {
                                    carousel.addItem(getImageTag(r[j]));
                                } else {
                                    break;
                                }
                                i++;
                                j++;
                            }

                            carousel.set("selectedItem", carousel.get("firstVisible"));
                        },

                        failure: function (o) {
                            alert("Ajax request failed!");
                        }
                    });
            }
                
            // Get the image link from within its (parent) container.
            function getLargeImage(parent) {
                var el = parent.firstChild;
                
                while (el) { // walk through till as long as there's an element
                    if (el.nodeName.toUpperCase() == "IMG") { // found an image
                        // flickr uses "_s" suffix for small, and "_m" for big
                        // images respectively
                        return el.src.replace(/_s\.jpg$/, "_m.jpg");
                    }
                    el = el.nextSibling;
                }
                
                return "";
            }

            YAHOO.util.Event.onDOMReady(function (ev) {
                var i, spotlight;
                
                myLogReader = new YAHOO.widget.LogReader();
                carousel    = new YAHOO.widget.Carousel("container", {
                    numItems: 17
                });
                YAHOO.util.Connect.asyncRequest("GET", "php/getimages.php",
                    {
                        success: function (o) {
                            var i, r = eval('(' + o.responseText + ')');
                            curpos = r.length;

                            for (i = 0; i < curpos; i++) {
                                items.push(r[i]);
                            }

                            // check if the Carousel widget is available
                            if (typeof carousel != "undefined") {
                                for (i = 0; i < curpos; i++) {
                                    // if so, shove the elements into it
                                    carousel.addItem(getImageTag(items[i]));
                                }
                                carousel.set("selectedItem", 0);
                                items = [];
                            }
                        },

                        failure: function (o) {
                            alert("Ajax request failed!");
                        }
                    });
                spotlight   = YAHOO.util.Dom.get("spotlight"),
                carousel.render();
                carousel.show();
                
                carousel.on("loadItems", function (o) {
                    // more items available?
                    getImages.call(this);
                });
                
                carousel.on("itemSelected", function (index) {
                    // item has the reference to the Carousel's item
                    var item = carousel.getElementForItem(index);

                    if (item) {
                        spotlight.innerHTML = "<img src=\"" +
                            getLargeImage(item) + "\">";
                    }
                });
            });
        </script>
    </head>
    <body id="bd" class="yui-skin-sam">
        <div id="main">
            <div class="promo">
                <h1>Carousel Widget: Dynamic Loading Example</h1>
                <div class="intro">
                    <p>
                        This example showcases the dynamic loading capabilities
                        of the YUI Carousel Widget.  The YUI Carousel Widget
                        exposes an event named "loadItems".  This event is
                        fired whenever the Carousel needs items to be loaded
                        into it for display.  Subscribing  to this event makes
                        it easy for dynamically loading the next set of images.
                    </p>
                    <p>
                        In this example, you can use arrow keys to select items,
                        as well as click on an item to select it.  This feature
                        is a built-in functionality of the YUI Carousel widget.
                    </p>
                </div>
                <div class="example-container">
                    <!-- The Carousel container -->
                    <div id="container">
                        <ol id="carousel"></ol>
                    </div>
                    <!-- The spotlight container -->
                    <div id="spotlight"></div>
                </div>
            </div>
            <h2>
                Making the Carousel Widget to dynamically load images on the fly
            </h2>
            <p>
                Here we will use the YUI Carousel Widget's
                "loadItems" event to dynamically load the images
                on the fly.
            </p>
            <p>
                This example has the following dependencies:
            </p>
<textarea rows="5" cols="110" readonly>
<link type="text/css" rel="stylesheet" href="http://yui.yahooapis.com/2.5.2/build/carousel/assets/skins/sam/carousel.css">
<script src="http://yui.yahooapis.com/2.5.2/build/yahoo/yahoo-dom-event.js"></script>
<script src="http://yui.yahooapis.com/2.5.2/build/element/element-beta-min.js"></script>
<script src="http://yui.yahooapis.com/2.5.2/build/connection/connection-min.js"></script>
<script src="http://yui.yahooapis.com/2.5.2/build/carousel/carousel-beta-min.js"></script>
</textarea>
            <p>
                Initially we use the Connection library to load the initial set
                of items as soon as part of the DOM is visible.
            </p>
<textarea rows="16" cols="110" readonly>
<div id="container">
  <ol id="carousel"></ol>
</div>
<!-- The spotlight container -->
<div id="spotlight"></div>
</textarea>
            <p>
                We'll have the CSS rules to set the dimensions for the Carousel
                items.
            </p>
<textarea rows="3" cols="110" readonly>
.yui-carousel-element li {
    height: 75px;
    width: 75px;
}
</textarea>
            <p>
                We'll use the YUI Connection library to load a set of items
                into the Carousel as early as possible.
            </p>
<textarea rows=20" cols="110" readonly>
YAHOO.util.Event.onAvailable("bd", function (args) {
  YAHOO.util.Connect.asyncRequest("GET", "php/getimages.php", {
      success: function (o) {
        var i, r = eval('(' + o.responseText + ')');
        curpos = r.length;

        for (i = 0; i < curpos; i++) {
          items.push(r[i]);
        }

        // check if the Carousel widget is available
        if (typeof carousel != "undefined") {
          for (i = 0; i < curpos; i++) {
            // if so, shove the elements into it
            carousel.addItem(getImageTag(items[i]));
          }
          carousel.set("selectedItem", 0);
          items = [];
        }
      },

      failure: function (o) {
        alert("Ajax request failed!");
      }
  });
});
</textarea>
            <p>
                Let us invoke the Carousel's constructor.    The YUI Carousel
                Widget's constructor is passed with the total number of items
                so that it triggers the "loadItems" event if the items are not
                available.
            </p>
<textarea rows="20" cols="110" readonly>
YAHOO.util.Event.onDOMReady(function (ev) {
    var i;
    
    myLogReader = new YAHOO.widget.LogReader();
    carousel    = new YAHOO.widget.Carousel("container", { numItems: 17 });
    carousel.render();
    carousel.show();
                
    if (items.length > 0) {
        for (i = 0; i < curpos; i++) {
            carousel.addItem(getImageTag(items[i]));
        }
        items = [];
    }
});
</textarea>
            <p>
                The YUI Carousel Widget exposes a "loadItems" custom event that
                is fired when the Carousel needs more items to be loaded.  This
                becomes very handy for us since we can subscribe to it and add
                more items in to the Carousel widget when required.
            </p>
            <p>
                In our case, the server program returns an array (JSON) of
                images.  This is parsed in the Ajax callback and then the
                Carousel's addItem() is called for every image.
            </p>
<textarea rows="20" cols="110" readonly>
function getImageTag(img) {
    return "<img src=\"" + img + "\" height=\"75\" width=\"75\">";
}

function getImages() {
    YAHOO.util.Connect.asyncRequest("GET", "php/getimages.php?pos=" + curpos,
        {
            success: function (o) {
                var i = curpos,
                    j = 0,
                    r = eval('(' + o.responseText + ')');
                            
                curpos += r.length;

                while (i < curpos) {
                    if (r[j]) {
                        carousel.addItem(getImageTag(r[j]));
                    } else {
                        break;
                    }
                    i++;
                    j++;
                }
            },

            failure: function (o) {
                alert("Ajax request failed!");
            }
        });
}

carousel.on("beforeScroll", function (o) {
    var i, j,
        last  = o.last,
        num   = carousel.get("numVisible");

    if (!carousel.getItem(last+num)) {
        // more items available?
        getImages();
    }

    return true; // so that the event is not aborted
});
</textarea>
            <p>
                Putting it altogether, the full JavaScript reads as follows:
            </p>
<textarea rows="30" cols="110" readonly>
var carousel, curpos, items = [], myLogReader;

function getImageTag(img) {
    return "<img src=\"" + img + "\" height=\"75\" width=\"75\">";
}

function getImages() {
    YAHOO.util.Connect.asyncRequest("GET", "php/getimages.php?pos=" + curpos,
        {
            success: function (o) {
                var i = curpos,
                    j = 0,
                    r = eval('(' + o.responseText + ')');
                            
                curpos += r.length;

                while (i < curpos) {
                    if (r[j]) {
                        carousel.addItem(getImageTag(r[j]));
                    } else {
                        break;
                    }
                    i++;
                    j++;
                }
            },

            failure: function (o) {
                alert("Ajax request failed!");
            }
        });
}

YAHOO.util.Event.onAvailable("bd", function (args) {
    YAHOO.util.Connect.asyncRequest("GET", "php/getimages.php",
        {
            success: function (o) {
                var i, r = eval('(' + o.responseText + ')');
                curpos = r.length;

                for (i = 0; i < curpos; i++) {
                    items.push(r[i]);
                }

                // check if the Carousel widget is available
                if (typeof carousel != "undefined") {
                    for (i = 0; i < curpos; i++) {
                        // if so, shove the elements into it
                        carousel.addItem(getImageTag(items[i]));
                    }
                    items = [];
                }
            },

            failure: function (o) {
                alert("Ajax request failed!");
            }
        });
});
            
YAHOO.util.Event.onDOMReady(function (ev) {
    var i;
    
    myLogReader = new YAHOO.widget.LogReader();
    carousel    = new YAHOO.widget.Carousel("container");
    carousel.render();
    carousel.show();
                
    if (items.length > 0) {
        for (i = 0; i < curpos; i++) {
            carousel.addItem(getImageTag(items[i]));
        }
        items = [];
    }
    
    carousel.on("beforeScroll", function (o) {
        var i, j,
            last  = o.last,
            num   = carousel.get("numVisible");

        if (!carousel.getItem(last+num)) {
            // more items available?
            getImages();
        }

        return true; // so that the event is not aborted
    });
});
</textarea>
    </body>
</html>
